const shouqi = document.querySelector('.shouqi')
const zhankai = document.querySelector('.zhankai')
const put = document.querySelector('.putAway')
const center = document.querySelector('.center')
const cont = document.querySelector('.container')
const img = document.querySelector('.img div')
const span = document.querySelectorAll('.row span')
shouqi.addEventListener('click', function () {
    put.setAttribute('style', 'height: 35vh; margin-bottom: 110px;')
    center.setAttribute('style', 'height: 15vh; overflow: hidden;')
    cont.setAttribute('style', 'display: block;')
    this.setAttribute('style', 'display:none;')
    zhankai.setAttribute('style', 'display: block;')
})
zhankai.addEventListener('click', function () {
    put.setAttribute('style', '')
    center.setAttribute('style', '')
    cont.setAttribute('style', 'display: none;')
    shouqi.setAttribute('style', 'display:block;')
    this.setAttribute('style', 'display: none;')
})
span.forEach((element, index) => {
    element.addEventListener('click', function () {
        span.forEach(item => {
            item.setAttribute('style', 'background-color: #fff;')
        });
        this.setAttribute('style', 'background-color: blue;')
        img.setAttribute('style', `left: -${index * 250}px`)
    })
});
let timenum = 0
setInterval(() => {
    if (timenum < span.length - 1) {
        timenum++;
    } else {
        timenum = 0;
    }
    span[timenum].click();
}, 2000);